<template>
	<view class="mywrap">
		<view class="name-wrap">
			<input style="width: 100%;" type="text" v-model="content" :placeholder="placeholder" maxlength="100"/>
		</view>
		<view class="tips">
			{{type == 0?'长度限制在2-8个字符内': '请限制在100个字符内'}}
		</view>
		<view class="menu-out flex-center-align" @click="save">
			<text>保存</text>
		</view>
	</view>
</template>

<script>
	let that;
	import personalApi from "@/api/personal.js"
	export default {
		data() {
			return {
				type: 0, //0 设置昵称 1 设置个人介绍
				content: '',
				placeholder: ''
			}
		},
		onLoad(e) {
			that = this;
			this.type = e.type
			this.content = e.name
			this.placeholder = this.type == 1 ? '输入您的个人简介' : '输入您的昵称'
			if (e.type == 1) uni.setNavigationBarTitle({
				title: '设置个人介绍'
			})
		},
		methods: {
			async save() {
				if(this.type == 0) {
					if (this.content.length < 2 || this.content.length > 8) return this.$common.msgShow('长度在2-8个字符')
				}
				let paramName = this.type == 0 ? 'nickname' : 'bio'
				let params = {
					rLoading: true
				}
				params[paramName] = this.content
				let res = await personalApi.editUserInfo(params)
				if (res.code === 1) {
					this.$common.pageBack('修改成功')
				} else {
					this.$common.msgShow(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url(@/common/css/iconfont.css);
	@import url(@/common/css/reset.css);

	.mywrap {
		position: relative;
		min-height: 100vh;
		background-color: #F9F7FC;
		padding-top: 20rpx;
	}

	.name-wrap {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		height: 120rpx;
		background: #FFFFFF;
	}

	.tips {
		text-align: right;
		padding: 30rpx;
		font-size: 24rpx;
		color: #9E9E9E;
	}
	.menu-out {
		margin: 100rpx auto 0;
		width: 630rpx;
		height: 90rpx;
		background: #1C87F3;
		border-radius: 45rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
